<template>
<view>
	<MallHeader :title="title"></MallHeader>
	<view class="header-info" @tap="address()">
		<view class="item">
			<view class="item-info" v-if="addressInfo !== ''">
				<view class="item1">
					<image src="/static/images/mallShop/address.png" class="icon-addr" mode=""></image>
					{{ addressInfo.name }} {{ addressInfo.phone }}
				</view>
				<view class="item2">
					{{ addressInfo.address }}
				</view>
			</view>
			
			<view class="empty" v-else>
					<image src="/static/images/mallShop/address.png" class="icon-addr" mode=""></image>
					请选择收货地址
			</view>
			
			<image src="/static/images/mallShop/arr_right.png" class="icon-right" mode=""></image>
		</view>
	</view>
	<view class="line-box"></view>
	<view class="bg-f5"></view>
	<view class="goods-box">
		
		<block v-for="(item, index) of goods_list" :key="index">
			<view class="box">
				<view class="shop-name pad" @tap="company(item.id)">
					<view class="left">
						<image src="/static/images/mallShop/shop.png" class="icon-shop" mode=""></image>
						{{ item.name }}
					</view>
					<image src="/static/images/mallShop/arr_right.png" class="icon-right" mode=""></image>
				</view>
				
				<view class="goods-item" v-for="(a, i) of item.children" :key="i">
						<view class="goods-img-box">
							<image :src="a.goods_image" class="goods-img" mode=""></image>
						</view>
						<view class="goods-info">
							<view class="goods-title">{{ a.goods_name }}</view>
							<view class="goods-params">
								<view class="label-box" v-if="a.goods_sku.goods_attr !== ''">
									<text class="label" v-for="(b, j) of a.goods_sku.goods_attr" :key="j">{{ b }}</text>
								</view>
								<view class="total">
									X {{ a.total_num }}
								</view>
							</view>
							<view class="goods-money">
								<view class="left">
									CD￥ {{ a.goods_sku.goods_price }}
								</view>
								<!-- <view class="shop-cart">
									加入购物车
								</view> -->
							</view>
						</view>
					</view>
			</view>
		</block>
		
		<view class="goods-list">
			<view class="goods-detail">
				<view class="item">
					<view class="label">
						商品总价
					</view>
					<view class="money">
						CD ￥ <text class="int">{{ info.order_total_price }}</text>
					</view>
				</view>
				<view class="item">
					<view class="label">
						交易手续费
					</view>
					<view class="money">
						<text class="int">{{ info.order_sxf_price }}</text> 元
					</view>
				</view>
				<view class="item">
					<view class="label">
						商品运费
					</view>
					<view class="money">
						<text class="int">{{ info.express_price }}</text>
					</view>
				</view>
				<view class="goods-money">
					<text class="int">实付款：</text> ￥ 
					<block v-if="parseInt(info.order_sxf_price) > 0"><text class="int">{{ info.order_sxf_price }} + </text></block>
						<block v-if="parseInt(info.express_price) > 0"><text class="int">{{ info.express_price }}</text></block>
				</view>
			</view>
		</view>
		
		<!-- <view class="bg-f5"></view> -->
		
		<!-- <view class="order-detail">
			<view class="order-title">
				订单信息
			</view>
			<view class="order-list">
				<view class="order-item">
					<view class="label">
						订单编号
					</view>
					<view class="info">
						{{ info.order_no }}
					</view>
				</view>
				<view class="order-item">
					<view class="label">
						创建时间
					</view>
					<view class="info">
						{{ info.create_time }}
					</view>
				</view>
			</view>
		</view>
		<view class="order-margin"></view> -->
	</view>
	<!-- 查看物流 -->
	<view class="order-fixed-btn" v-if="false">
		<view class="btn order-btn bg-color">
			确定订单
		</view>
		<view class="btn">
			查看物流
		</view>
		<view class="btn">
			联系客服
		</view>	
	</view>
	<!-- end of 查看物流 -->
	<!-- 支付订单 -->
	<view class="order-fixed-btn">
		<view class="btn order-btn bg-color" @tap="submit()">
			确定订单
		</view>
		<view class="btn-info">
			<text class="int">需支付：</text> 
			<view>￥ <text class="int">{{ info.order_pay_price  }}</text>
			</view>
		</view>
		
		
	</view>
	<!-- end of 支付订单 -->
</view>
</template>

<script>
	import MallHeader from '@/components/mallHeader/mallHeader'
	
	import { buyNow, isLogin, shopDetail, addressList, submitBuy, cartConfirm, cartSubmit } from '@/api/substitution.js'
		
	export default {
		components:{
			MallHeader
		},
		data(){
			return {
				title:'确认订单',
				goods_list: [],
				
				info: '',
				
				addressInfo: '',
				type: null,
			}
		},
		onShow() {
			
			// 获取默认地址
			addressList().then(res => {
				if (res.data.list.length > 0) {
					res.data.list.forEach(item => {
						item.address = '';
						if (item.address_id === res.data.default_id) {
							this.addressInfo = item
						}
						for (let i in item.region) {
							item.address += item.region[i] + ' '
						}
					})
				} else {
					this.addressInfo = ''
				}
			})
			
		},
		onLoad(e) {
			
			this.type = e.type;
			
			// 订单列表, 0 为立即购买，单个商品， 1为购物车购买，多个商品
			switch (parseInt(e.type)) {
				case 0:
					if (e.sku_id && e.id && e.num) {
						buyNow({
							delivery: 0,
							shop_id: 0,
							coupon_id: 0,
							is_use_points: 0,
							goods_id: e.id,
							goods_num: e.num,
							goods_sku_id: e.sku_id
						}).then(res => {
							this.listData (res)
						})
					}
					break;
					
				case 1:
					cartConfirm({
						delivery: 0,
						shop_id: e.shop_id,
						coupon_id: 0,
						is_use_points: 0,
						cart_ids: e.cart_ids
					}).then(res => {
						this.listData (res)
					})
					break;
			}
		},
	
		methods: {
			
			// 商店详情
			company (e) {
				uni.navigateTo({
					url: '../home/merchantsDtl?id=' + e
				})
			},
			
			// 计算商品
			listData (e) {
				this.info = e.data
				// 获取商品详情
				e.data.goods_list.forEach(item => {
					shopDetail({
						shop_id: item.shop_id
					}).then(r => {
						const result = this.goods_list.some(i => {
							if (i.name === r.data.detail.shop_name) return true
						})
						
						if (!result) {
							this.goods_list.push({
								name: r.data.detail.shop_name,
								id: r.data.detail.shop_id,
								children: []
							})
						}
						
						this.goods_list.forEach(i => {
							if (i.id === item.shop_id) {
								if (item.goods_sku.goods_attr !== '') {
									item.goods_sku.goods_attr = item.goods_sku.goods_attr.replace('; ', '').split(':')
								}
								i.children.push(item)
							}
						})
					})
				})
			},
			
			// 提交购买
			submit () {
				
				// 判断是否选择地址
				if (this.addressInfo !== '') {
					// 0为立即购买，1为购物车购买
					switch (parseInt(this.type)) {
						case 0: 
							const goods_id = [];
							const goods_sku_id = [];
							const goods_num = [];
							const shop_id = []
							
							this.goods_list.forEach(item => {
								shop_id.push(item.id)
								
								item.children.forEach(i => {
									goods_num.push(i.total_num)
									goods_id.push(i.goods_sku.goods_id)
									goods_sku_id.push(i.goods_sku.spec_sku_id)
								})
							})
							
							submitBuy({
								delivery: 10,
								pay_type: 40,
								linkman: this.addressInfo.name,
								phone: this.addressInfo.phone,
								coupon_id: 0,
								shop_id: shop_id.join(','),
								is_use_points: 0,
								remark: '',
								goods_id: goods_id.join(','),
								goods_num: goods_num.join(','),
								goods_sku_id: goods_sku_id.join(','),
							}).then(res => {
								if (res.code === 1) {
									this.getPay(res.data.payment)
								}
							})
						break;
						
						case 1: 
							const cart_ids = [];
							const shop = [];
							this.goods_list.forEach(item => {
								shop.push(item.id)
								
								item.children.forEach(i => {
									cart_ids.push(i.goods_id + '_' + i.goods_sku_id);
								})
							})
							cartSubmit({
								delivery: 10,
								pay_type: 40,
								shop_id: shop.join(','),
								linkman: this.addressInfo.name,
								phone: this.addressInfo.phone,
								is_use_points: 0,
								remark: '',
								cart_ids: cart_ids.join(',')
							}).then(res => {
								if (res.code === 1) {
									this.getPay(res.data.payment)
								}
							})
						break;
					}
					
				} else {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none'
					})
				}
				
			},
			
			getPay (e) {
				uni.requestPayment({
					provider: "wxpay",
					orderInfo: e,
					complete: r => {
						uni.redirectTo({
							url: './order?id=0'
						})
					},
				})
			},
			
			// 获取地址
			getAddress () {
				addressList().then(res => {
					res.data.list.forEach(item => {
						item.address = ''
						for (let i in item.region) {
							item.address += item.region[i] + ' '
						}
					})
					this.listData = res.data.list
				})
			},
			
			// 切换地址
			address () {
				uni.navigateTo({
					url: './addressList'
				})
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.header-info{
		padding-top: 30rpx;
		.item{
			padding:0 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 130rpx;
			
			.empty {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				color: gray;
				.icon-addr{
					width: 30rpx;
					height: 40rpx;
					margin-right:10rpx;
				}
			}
			.item-info{
				.item1{
					display: flex;
					align-items: center;
					font-size: 34rpx;
					font-weight: bold;
					color: #333333;
					.icon-log{
						width: 38rpx;
						height: 34rpx;
						margin-right:10rpx;
					}
					.icon-addr{
						width: 30rpx;
						height: 40rpx;
						margin-right:10rpx;
					}
				}
				.item2{
					color: #999999;
					font-size: 30rpx;
					margin-top: 10rpx;
				}
				
			}
			.icon-right{
				width: 26rpx;
				height: 26rpx;
			}
		}
	}
	.line-box{
		height: 2px;
		width: 100%;
		background: url('/static/images/mallShop/line.png') repeat-x center;
	}
	.bg-f5{
		background-color: #F5F5F5;
		height: 20rpx;
	}
	.goods-box{
		.shop-name{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			font-size: 32rpx;
			color: #333333;
			.left{
				@include  alignCenter();
			}
			.icon-shop{
				width: 36rpx;
				height: 34rpx;
				margin-right: 10rpx;
			}
			.icon-right{
				width: 26rpx;
				height: 26rpx;
			}
		}
		.goods-list{
			margin-top: 20rpx;
		}
		.goods-item{
			display: flex;
			border-bottom:1px solid #efefef;
			margin-top:25rpx;
			padding:0 30rpx 30rpx;
			.goods-img-box{
				margin-right: 20rpx;
				padding-top:10rpx;
				.goods-img{
					width: 164rpx;
					height: 164rpx;
					border-radius: 10rpx;
				}
			}
			.goods-info{
				.goods-title{
					font-size: 34rpx;
					height: 80rpx;
					line-height: 40rpx;
					color: #333333;
					overflow: hidden;
					width:510rpx;
					display: -webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient:vertical;
					text-overflow: ellipsis;
				}
				.goods-params{
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					.label-box{
						display: flex;
						flex-wrap: wrap;
						.label{
							@include flexCenter();
							padding: 12rpx 30rpx;
							border:1rpx solid #EFEFEF;
							border-radius: 35rpx;
							height: 46rpx;
							font-size: 24rpx;
							margin-bottom: 20rpx;
							max-width: 200rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							
							/deep/ span {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							&+.label{
								margin-left:15rpx;
							}
						}
					}
					.total{
						font-size: 28rpx;
						white-space: nowrap;
						margin-left: 15rpx;
					}
				}
				.goods-money{
					margin-top: 20rpx;
					font-size: 30rpx;
					display: flex;
					justify-content: space-between;
					.cart-num{
						display: flex;
						align-items: center;
						border: 1px solid #CDCDCD;
						height: 50rpx;
						border-radius: 25rpx;
						.icon-add{
							font-size: 30rpx;
							width: 60rpx;
							text-align: center;
						}
						input{
							width: 40rpx;
						}
					}
					.shop-cart{
						width: 150rpx;
						height: 50rpx;
						color: #FE7B47;
						border-radius: 25rpx;
						@include flexCenter();
						border:1rpx solid #FE7B47;
						font-size: 26rpx;
					}
				}
			}
		}
		
	}
	.goods-detail{
		padding:0 30rpx;
		margin-top: 20rpx;
		.item{
			display: flex;
			justify-content: space-between;
			height: 60rpx;
			line-height: 60rpx;
			.label{
				color: #666666;
				font-size: 28rpx;
			}
			.money{
				font-size: 26rpx;
				.int{
					font-size: 28rpx;
				}
			}
		}
		.goods-money{
			font-size: 30rpx;
			color: #F13A1D;
			text-align: right;
			padding-bottom:40rpx;
			margin-top:20rpx;
		}
	}
	.order-title{
		color: #333333;
		font-size: 30rpx;
		padding-left:30rpx;
		padding-top:35rpx;
	}
	.order-list{
		padding:0 30rpx 35rpx;
		margin-top: 10rpx;
		.order-item{
			display: flex;
			justify-content: space-between;
			color: #666666;
			font-size: 28rpx;
			line-height: 60rpx;
			height: 60rpx;
			.info{
				color: #333333;
			}
		}
	}
	.order-margin{
		height: 140rpx;
	}
	.order-fixed-btn{
		position: fixed;
		box-sizing: border-box;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		background-color: #FFFFFF;
		box-shadow: 0px -5rpx 4rpx 0px rgba(51, 51, 51, 0.05);
		padding:0 30rpx;
		.btn{
			@include btnStyle(200,80);
			@include flexCenter();
			border:1px solid #efefef;
			color:#999999;
			font-size: 34rpx;
			&+.btn{
				margin-right:20rpx;
			}
			&.bg-color{
				background: linear-gradient(-90deg, #FE4A32 0%, #FE7E48 100%);
				border:1px solid #FE4A32;
				color: #FFFFFF;
			}
		}
		.btn-info{
			color: #F13A1D;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin-right: 30rpx;
			.int{
				font-size: 30rpx;
			}
		}
	}

</style>
